<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-form layout="inline" :form="form" @submit="handleSubmit">
            <a-form-item label="描述">
              <a-input allow-clear placeholder="请输入描述" v-model="description"></a-input>
            </a-form-item>
            <a-form-item label="名称">
              <a-input allow-clear placeholder="请输入名称" v-model="name"></a-input>
            </a-form-item>
            <a-form-item
                label="字典类型"
              >
              <a-select
                show-search
                style="width: 180px"
                placeholder="请选择"
                allow-clear
                v-model="dictType"
              >
              <a-select-option
                  :value="item.code"
                  v-for="(item,index) in typeList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
                
              </a-select>
              </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit">搜索</a-button>
              <a-button type="primary" style="margin-left: 10px" @click="add('')">新建</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>

    </a-card>

    <a-card>
      <div style="display:flex;justify-content:space-between">
        <a-table bordered :loading="loading" :columns="columns" style="width:49%" @change="handleTableChange"
          :customRow="loadCustomRow" :row-class-name="record => record.name == selectName ? 'table-background' : ''"
          :data-source="dataSource" :pagination="pagination">
          <template slot="title">
            数据字典
          </template>
          <template slot="action" slot-scope="txt, record">
            <a class="mr-10" @click="add(record)">
              <a-icon type="edit" />编辑
            </a>
            <!-- <a-popconfirm
            :title="`确定要删除${record.name} 吗?`"
            @confirm="deleteRecord(record)"
          >
            <a class="mr-10">
              <a-icon type="delete" />删除
            </a>
          </a-popconfirm> -->

            <a class="mr-10" @click="toDetail(record, 1)">
              <a-icon type="plus" />添加子项
            </a>
          </template>

        </a-table>
        <a-table bordered style="width:49%" :columns="innerColumns" :data-source="childList">
          <template slot="title">
            数据子项
          </template>
          <template slot="action" slot-scope="txt, record">
            <a class="mr-10" @click="toDetail(record, 2)">
              <a-icon type="edit" />编辑
            </a>
            <a class="mr-10" @click="addChild(record)">
              <a-icon type="edit" />查看下级
            </a>
            <!-- <a-popconfirm
              :title="`确定要删除${record.name} 吗?`"
              @confirm="deleteDetail(record)"
            >
              <a class="mr-10">
                <a-icon type="delete" />删除
              </a>
            </a-popconfirm> -->
          </template>
        </a-table>
      </div>
      <create v-if="showAdd" :dict="dict" @close="close"></create>
      <child v-if="showChild" :dict="dict" @closeChild="closeChild"></child>
      <detail v-if="showDetail" :detail="detail" :type="type" @closeDetail="closeDetail"></detail>
    </a-card>
  </div>
</template>

<script>
import create from './create.vue'
import detail from './detail.vue'
import child from './info.vue'

import { getDictList, dictDelete, detailDelete, getDictChildList } from '@api/rd/index'
const columns = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '描述',
    dataIndex: 'description'
  },

  {
    title: '操作',
    width: 220,
    scopedSlots: { customRender: 'action' }
  }
]
const innerColumns = [
  {
    title: '序号',
    dataIndex: 'seq'
  },
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '值',
    dataIndex: 'code'
  },
  // {
  //   title: '上级',
  //   dataIndex: 'parentName'
  // },
  {
    title: '操作',
    width: 160,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    create,
    detail,
    child
  },
  data() {
    return {
      columns,
      innerColumns,
      showAdd: false,
      form: this.$form.createForm(this),
      selectName: '',
      showDetail: false,
      loading: false,
      type: '',
      name: '',
      loadingChild: false,
      showChild:false,
      description: '',
      dataSource: [],
      childList: [],
      dict: {},
      dictType:undefined,
      groupName: '',
      innerData: [],
      typeList:[],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  mounted() {
    this.loadData()
    this.loadType()
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  methods: {
    loadCustomRow(record, index) {
      return {
        on: {
          click: () => {
            this.selectName = record.name
            this.loadDetail(record.name)
          }
        }
      }
    },
    close() {
      this.showAdd = false
      this.loadData(1)
    },
    add(record) {
      this.showAdd = true
      this.dict = record
    },
    toDetail(record, type) {
      this.showDetail = true
      this.type = type
      this.detail = record
    },
    addChild(record){
      this.showChild = true
      this.dict = record
    },
    closeChild() {
      this.showChild = false
      this.loadDetail(this.selectName)
    },
    closeDetail() {
      this.showDetail = false
      this.loadDetail(this.selectName)
    },
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
    async deleteDetail(record) {
      const params = {
        dictId: record.dictId,
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await detailDelete('dict', params)
        if (res.code == 200) {
          this.$message.success('删除数据字典子项成功！')
          this.loadData()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    async deleteRecord(record) {
      const params = {
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await dictDelete('dict', params)
        if (res.code == 200) {
          this.$message.success('删除数据字典成功！')
          this.loadData()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },

    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    onClickParent(values) {
      this.selectName = values.name
      this.loadDetail(values.name)
    },
    async loadType() {
      const params = {
        current: 1,
        name: 'DICT_TYPE'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.typeList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取字典类型失败！')
      } 
    },
    async loadDetail(name) {
      this.loadingChild = true
      const params = {
        current: this.pagination.current,
        // size: this.pagination.pageSize,
        name: name
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.childList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取数据字典子项列表失败！')
      } finally {
        this.loadingChild = false
      }
    },
    async loadData(key) {
      this.loading = true
      if (key) {
        this.pagination.current = 1
      }
      const params = {
        current: this.pagination.current,
        size: this.pagination.pageSize,
      }
      if (this.description) {
        params.description = this.description
      }
      if (this.dictType) {
        params.dictType = this.dictType
      }
      if (this.name) {
        params.name = this.name
      }
      try {
        const res = await getDictList('dict', params)
        if (res.code == 200) {
          this.dataSource = res.data.records
          // this.selectName = this.dataSource[0].id
          this.pagination.total = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取数据字典列表失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}

.ant-modal-body {
  display: flex;
  justify-content: space-between;
}

.row1 {
  border: solid 1px rgb(233, 233, 233);
  width: 49%;
}

.parent {
  border: solid 0px rgb(216, 216, 216);
  padding: 10px;
}

.item {
  border: solid 1px rgb(241, 241, 241);
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.item-sel {
  background-color: rgb(214, 229, 255);
}
</style>
<style>
.table-background {
  background: rgb(214, 229, 255);
}
</style>
